//界面刷新时弹出加载该界面
$(function () {

    function getData() {
        $.ajax({
            url: "https://api.xiaohucloud.com/api/data/productListByCategoryIds",
            data: {
                ids: 2968,
                limit: 999,
                token: '543aec3aca56487f89ddac17ae9b5f6cF3Gh79',
                lang: 'cn',
                type: 2,
                versionId: 2130,
                version_id: 2130,
                companyId: 100340
            },
            type: "GET",
            dataType: "json",
            success: function (data) {
                // console.log(data);
                const { data: arr } = data
                console.log(arr);
                // console.log(res.data.data);
                // 数据的个数
                let count = arr.length
                // 每页显示数量
                let eachNum = 4
                // 页数
                let pageNum = Math.ceil(count / eachNum)
                // 当前页
                let curPage = 1
                // 通过页数渲染分页按钮li
                for (let i = 1; i <= pageNum; i++) {
                    $('.next').before(`<li class="item num" data-index=` + i + `>` + i + `</li>`)
                }


                // 定义渲染当前页的函数
                function renderLi(curPage) {
                    // 获取当前页的第一项数据索引
                    let firstIndex = eachNum * (curPage - 1)
                    // console.log(firstIndex);
                    // 从当前页第一项开始循环渲染li
                    for (i = firstIndex; i < firstIndex + eachNum; i++) {
                        // 当准备渲染的索引没超过实际数据的数量时
                        if (i < count) {
                            let imgurls = arr[i]['image']
                            let desNames = arr[i]['name']
                            // console.log(imgurls);
                            // console.log(desNames);
                            let lis = `<li class="item">
                                <img class="img" src=`+ imgurls + ` alt="" />
                                <p class="des">`+ desNames + `</p>
                             </li>`
                            $('#ul-list').append(lis)
                        }
                    }
                }
                // 渲染当前页数据
                renderLi(curPage)

                // 移除原先渲染的li
                function clearLis() {
                    $('#ul-list').empty()
                }

                // 清除所有按钮active类
                function clearAct(){
                    let arrBtn=$('.pag-list .num')
                    for (let i = 0; i < arrBtn.length; i++) {
                        arrBtn.eq(i).attr('class','item num')
                    }
                }
                // 选中状态按钮添加类active
                function selected(curPage){
                    console.log(curPage);
                    let arrBtn=$('.pag-list .num')
                    arrBtn.eq(curPage-1).attr('class','item num active')
                }
                selected(curPage)

                // 绑定分页按钮的单击事件
                $('.pag-list .num').on('click', function () {
                    // 获取当前页索引
                    curPage = $(this).attr('data-index')
                    console.log(curPage);
                    clearLis() //清除原来渲染项
                    renderLi(curPage) // 渲染新获得的项
                    clearAct()  //清除按钮的选中类active
                    selected(curPage) //给选中页按钮添加类active
                })

                // 绑定上一页按钮的单击事件
                $('.pre').on('click', function () {
                    // 如果当前页为第一页则不跳转
                    // 如果不为第一页则减一
                    if (curPage > 1) {
                        // 当前页减一
                        curPage--
                        console.log(curPage);
                        clearLis()
                        renderLi(curPage)
                        clearAct()
                        selected(curPage)
                    }

                })

                // 绑定下一页按钮的单击事件
                $('.next').on('click', function () {
                    // 如果当前页为最后页则不跳转
                    // 如果不为最后页则加一
                    if (curPage < pageNum) {
                        // 当前页加一
                        curPage++
                        console.log(curPage);
                        clearLis()
                        renderLi(curPage)
                        clearAct()
                        selected(curPage)
                    }
                })
            }
        })
    }
    // 调用
    getData()
})